<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never" body-style="padding:25px 0 0 0">
      <el-form ref="carForm" label-width="80px" :model="carForm">
        <el-row :gutter="24" class="oneBox">
          <el-col :span="7">
            <el-form-item label="车辆类型:" prop="truckTypeId">
              <el-select v-model="carForm.truckTypeId" placeholder="请选择" style="width:260px">
                <el-option v-for="item in carType" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="车牌号码:" prop="licensePlate">
              <el-input v-model="carForm.licensePlate" placeholder="请选择车牌号码" style="width:260px" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item>
              <el-button type="primary" style="background-color:#e15536;width:80px" @click="searchFn">搜索</el-button>
              <el-button style="width:80px" @click="resetFn">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card" shadow="never" body-style="padding:0">
      <div class="tab-change">
        <div class="tab-item" :class="{active: carForm.workStatus == null}" @click="getCarList(null)">
          <span>全部</span> <span style="font-weight: bold;">{{ allCount }}</span>
        </div>
        <div class="tab-item" :class="{active: carForm.workStatus == 1}" @click="getCarList(1)">
          <span>可用</span> <span style="font-weight: bold;">{{ count2 }}</span>
        </div>
        <div class="tab-item" :class="{active: carForm.workStatus == 0}" @click="getCarList(0)">
          <span>停用</span> <span style="font-weight: bold;">{{ count1 }}</span>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" shadow="never">
      <el-button type="primary" style="width:100px; margin-bottom: 20px;" @click="addFn">新增车型</el-button>
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="headerCellStyle"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60"
        >
          <template v-slot="{$index}">{{ (pageData.page-1)*pageData.pageSize+$index+1 }}</template>
        </el-table-column>
        <el-table-column
          prop="licensePlate"
          label="车牌号码"
          width="120"
        />
        <el-table-column
          prop="truckTypeName"
          label="车型类型"
          width="100"
        />
        <el-table-column
          prop="driverNum"
          label="司机数量"
          width="100"
        />
        <el-table-column
          prop="workStatus"
          label="车辆状态"
          width="120"
        >
          <template v-slot="{row}">
            <span v-if="row.workStatus === 0" style="display:flex"><span class="TingYong">•</span>停用</span>
            <span v-if="row.workStatus === 1" style="display:flex"><span class="QiYong">•</span>启用</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceGpsId"
          label="GPS设备ID"
          width="160"
        />
        <el-table-column
          prop="allowableLoad"
          label="实载重量(T)"
          width="160"
        />
        <el-table-column
          prop="allowableVolume"
          label="实载体积(方)"
          width="160"
        />
        <el-table-column label="操作" align="center">
          <template v-slot="{row}">
            <el-button class="edit" type="text" style="color:#4ea1ff" @click="$router.push(`carDetails/${row.id}`)">查看详情</el-button>
            <el-divider direction="vertical" />
            <el-button v-if="row.workStatus === 0" class="edit" type="text" style="color:#4ea1ff" @click="open(row.id)">启用</el-button>
            <el-button v-if="row.workStatus === 1" class="edit" type="text" style="color:#f78989" @click="out(row.id)">停用</el-button>
            <el-divider direction="vertical" />
            <el-button class="del" type="text" style="color:#4ea1ff" @click="isConfigure = true">配置司机</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" class="footer">
        <el-pagination
          :current-page="pageData.page"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <!-- 添加弹层 -->
    <el-dialog title="新增车辆" :visible.sync="isShow" width="40%">
      <el-form ref="addForm" style="padding:0 30px" label-width="100px" :model="addForm" :rules="rules">
        <el-form-item label="车辆类型" prop="truckTypeId">
          <el-select v-model="addForm.truckTypeId" placeholder="请选择" style="width:100%">
            <el-option v-for="item in carType" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码" prop="licensePlate">
          <template>
            <el-input v-model="addForm.licensePlate" maxlength="15" type="text" autocomplete="off" placeholder="请输入车牌号码" />
          </template>
        </el-form-item>
        <el-form-item label="GPS设备ID" prop="deviceGpsId">
          <el-input v-model="addForm.deviceGpsId" maxlength="10" autocomplete="off" placeholder="请输入GPS设备ID" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addConfirm">确定</el-button>
        <el-button @click="isShow = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 启用车辆弹层 -->
    <el-dialog
      title="车辆启用"
      :visible.sync="isEnableShow"
      width="30%"
    >
      <div>确定要启用吗？车辆启用需满足以下条件：</div>
      <div style="margin-top:15px">
        <span style="margin-right:80px">1.车辆信息已完善</span><span>2.绑定司机>=2,且有排班</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openCar">确 定</el-button>
        <el-button @click="abolish">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 停用弹窗 -->
    <el-dialog
      title="车辆停用"
      :visible.sync="isOutShow"
      width="30%"
    >
      <div>确定要停用吗？车辆停用需满足以下条件：</div>
      <div style="margin-top:15px">
        <span style="margin-right:80px;">1.车辆当前无运输任务</span><span>2.车辆无关联运输线路</span>
        <div style="color:#ffb302;margin-top:15px">注：停用后司机将自动解除绑定</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="outCar">确 定</el-button>
        <el-button @click="abolish">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 车辆配置弹窗 -->
    <el-dialog
      title="车辆配置"
      :visible.sync="isConfigure"
      width="30%"
    >
      <div>配置司机需满足以下条件：</div>
      <div style="margin-top:15px">
        <span style="margin-right:80px;">1.车辆信息已完善</span><span>2.车辆无未完成运输任务</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isConfigure2 = true">确 定</el-button>
        <el-button @click="isConfigure = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 二级车辆配置弹窗 -->
    <el-dialog
      title="配置司机"
      :visible.sync="isConfigure2"
      width="40%"
    >
      <el-card class="box-card" body-style="background-color:#fbfafa" shadow="false">
        <el-row :gutter="24" type="flex" justify="space-around" style="margin-bottom:15px">
          <el-col :span="8">
            车牌号：<span>粤B35454</span>
          </el-col>
          <el-col :span="8">
            车型：<span>大苏打23</span>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex" justify="space-around" style="margin-bottom:15px">
          <el-col :span="8">
            车辆状态：<span class="use">可用</span>
          </el-col>
          <el-col :span="8">
            实载重量：<span>10</span>
          </el-col>
        </el-row>
        <div style="margin-left:47px">
          <div>实载体积：<span>10</span></div>
        </div>
      </el-card>
      <span style="font-weight: 700;">配置司机：</span>
      <el-select placeholder="请输入司机名称" filterable style="width:300px">
        <el-option />
      </el-select>
      <el-table
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
      </el-table>
      <el-empty description="这里空空如也" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isConfigure2 = false">确 定</el-button>
        <el-button @click="isConfigure2 = false, isConfigure = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCarListApi, getCarTypeApi, addCarApi, enableCarApi, outCarApi, carNumApi } from '@/api/carList'
export default {
  data() {
    return {
      headerCellStyle: { // 表头单元格样式
        backgroundColor: '#f8faff'
      },
      tableData: [],
      pageData: {
        page: 1, // 当前页
        pageSize: 10 // 一页多少条数据
      },
      total: 0, // 总共多少条数据
      loading: false, // loading加载开关
      isShow: false, // 弹框的开关
      carType: [], // 下拉框的数据
      carForm: { // 搜索表单绑定的数据
        truckTypeId: '', // 下拉框
        licensePlate: '', // input搜索框
        workStatus: null
      },
      addForm: { // 添加车型表单
        truckTypeId: '',
        licensePlate: '',
        deviceGpsId: ''
      },
      rules: {
        truckTypeId: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' }
        ],
        licensePlate: [
          { required: true, message: '车牌号码不能为空', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: 'GPS设备ID不能为空', trigger: 'blur' }
        ]
      },
      count1: null, // 不可用车辆总数
      count2: null, // 可用车辆总数
      allCount: null, // 全部车辆总数
      isEnableShow: false, // 启用弹窗开关
      isOutShow: false, // 停用弹窗开关
      openCarId: null, // 启用车辆Id
      outCarId: null, // 停用车辆Id
      isConfigure: false, // 配置司机弹窗开关
      isConfigure2: false, // 配置司机第二个弹窗开关
      assignedDriverId: null
    }
  },
  async created() {
    this.getCarList()
    this.carType = await getCarTypeApi()
    this.carCounts()
  },
  methods: {
    // 获取页面数据
    async getCarList(type) {
      this.loading = true
      this.carForm.workStatus = type
      const res = await getCarListApi({ ...this.pageData, ...this.carForm })
      this.counts = res.counts
      // console.log(res)
      this.tableData = res.items
      this.total = +res.counts
      this.loading = false
    },
    // 获取分页加载多少数据
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.getCarList()
    },
    // 切换分页数据
    handleCurrentChange(val) {
      this.pageData.page = val
      this.getCarList()
    },
    // 添加车辆确认
    async addConfirm() {
      // 2.添加的时候校验数据
      await this.$refs.addForm.validate()
      // 3.发送请求添加数据
      await addCarApi(this.addForm)
      // 4.添加成功提示信息
      this.$message.success('新增车辆成功')
      // 5.清空表单内容并关闭弹窗
      this.resetAddFormFn()
      // 6.重新获取数据
      this.getCarList()
    },
    // 添加车辆弹框
    async addFn() {
      // 1.显示弹框
      this.isShow = true
    },
    // 重置搜索内容
    async resetFn() {
      await this.$refs.carForm.resetFields()
      this.getCarList()
    },
    // 搜索
    async searchFn() {
      this.getCarList()
    },
    // 清空弹框表单内容
    async resetAddFormFn() {
      // 1.清空表单内容
      this.$refs.addForm.resetFields()
      // 2.关闭弹窗
      this.isShow = false
    },
    // 启用车辆弹窗
    async open(id) {
      this.openCarId = id
      this.isEnableShow = true
    },
    // 停用车辆弹窗
    async out(id) {
      this.outCarId = id
      this.isOutShow = true
    },
    // 启用车辆确认按钮
    async openCar() {
      // 关闭弹窗 以下逻辑可以执行就执行，不能执行后台返回的有提示信息
      this.isEnableShow = false
      await enableCarApi(this.openCarId)
      this.$message.success('车辆启用成功')
      this.getCarList()
    },
    // 停用车辆确认按钮
    async outCar() {
      // 关闭弹窗 以下逻辑可以执行就执行，不能执行后台返回的有提示信息
      this.isOutShow = false
      await outCarApi(this.outCarId)
      this.$message.success('停用车辆成功')
      this.getCarList()
    },
    // 停用启用车辆取消弹层按钮
    abolish() {
      this.isEnableShow = false
      this.isOutShow = false
      this.$message('已取消')
    },
    // 车辆总数
    async carCounts() {
      const res = await carNumApi()
      this.allCount = +res[0] + +res[1]
      this.count1 = res[0]
      this.count2 = res[1]
    },
    async assignedDriverDialog() {
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  .box-card{
    border: none;
    margin-bottom: 20px;
  }
  .tab-change{
    display: flex;
    border-radius: 4px;
    .active{
      background-color: #ffeeeb;
      color: #e15536;
    }
    .tab-item{
      width: 120px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .footer{
    padding-top: 20px;
  }
  .dialog-footer{
    display: flex;
    justify-content: center;
  }
  .TingYong{
    color:#e15536;
    margin-right: 6px;
    font-size: 25px;
  }
  .QiYong{
    color:#1dc779;
    font-size:25px;
    margin-right: 6px;
  }
  .use{
    display: inline-block;
    text-align: center;
    line-height: 20px;
    width: 41px;
    height: 20px;
    border-radius: 13.5px;
    color: #fff;
    font-size: 12px;
    background: #37c608;
  }
}
</style>
